<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 关键字头 搜索 -->
      <div class="text item">
        <el-form
          :inline="true"
          :model="queryInfo"
          class="demo-form-inline"
        >
          <el-row justify="space-between">
            <el-col :span="6">
              <el-form-item
                class="inputlength"
                label="关键字"
                label-width="80px"
              >
                <el-input
                  class="inputSize"
                  v-model="queryInfo.keyword"
                  placeholder="根据编号搜索"
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="margin-left:50%;"
            >
              <el-form-item style="float: right;">
                <el-button
                  size="small"
                  @click="removeRandoms"
                >清除</el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="getTableList"
                >搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 数据条数 -->
      <el-alert
        style="margin-bottom: 15px;"
        :title="'数据一共' + dataNumber + '条'"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 表格 -->
      <!-- <el-table
      :data="tableList"
      style="width: 100%">
      <el-table-column
        :key="item.id"
        v-for="item in tableList"
        prop="date"
        :label="item.index"
      >
      </el-table-column>
    </el-table> -->
      <el-table :data="tableList">
        <el-table-column
          label="编号"
          prop="id"
          width="220px"
        ></el-table-column>
        <el-table-column
          label="题型"
          width="80px"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.questionType === '1'">单选</div>
            <div v-else-if="scope.row.questionType === '2'">多选</div>
            <div v-else>简答</div>
          </template>
        </el-table-column>
        <el-table-column
          label="题目编号"
          prop="questionIDs[0].number"
          width="220px"
        >
          <template slot-scope="scope">
            <div
              @click="displayQuestionIDs(scope.row)"
              v-for="item in scope.row.questionIDs"
              :key="item.number"
            >
              <a
                href="javascript:;"
                class="link"
                @click="openlinks(item.id)"
              >{{item.number}}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          prop="addTime"
          width="180px"
        ></el-table-column>
        <el-table-column
          label="答题时间(s)"
          prop="totalSeconds"
          width="165.6px"
        ></el-table-column>
        <el-table-column
          label="正确率(%)"
          prop="accuracyRate"
          width="165.6px"
        ></el-table-column>
        <el-table-column
          label="录入人"
          prop="userName"
          width="165.6px"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="80px"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              size="small"
              @click="removeData(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 题目编号弹出框 -->
    <!-- 预览 -->
    <question-preview :viewVisible.sync="viewVisible" :viewInfo="viewInfo"/>
    <!-- /预览 -->
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions' // 组题列表数据 删除
import questionPreview from '../components/questions-preview'// 对话框组件

export default {
  data () {
    return {
      dataNumber: 0, // 总数据
      tableList: [],
      // 题目编号链接弹出框的显示与隐藏
      viewVisible: false,
      dataRow: [],
      queryInfo: {
        keyword: '', // 关键字
        page: 1, // 当前页数
        pagesize: 10 // 页尺寸
      },
      viewInfo: {}
    }
  },
  components: {
    // 注册组件
    questionPreview
  },
  created () {
    this.getTableList()
  },
  methods: {
    async openlinks (id) {
      this.viewVisible = true
      try {
        const { data } = await detail({ id })
        console.log(data)
        this.viewInfo = data
      } catch (err) {
        this.$message('获取失败')
      }
    },
    // 获取数据
    async getTableList () {
      const { data } = await randoms(this.queryInfo)
      console.log(data)
      this.tableList = data.items
      console.log(this.tableList)
      this.dataNumber = data.counts // 总数据条数
      this.queryInfo.pagesize = data.pagesize // 每页显示多少条数据
      this.queryInfo.page = data.page // 当前页数
    },
    // 删除数据
    async removeData (id) {
      console.log(id)
      const confirmResult = await this.$confirm(
        '此操作将永久删除该参数，是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      try {
        await removeRandoms(id)
        this.$message.success('删除成功！')
        this.getTableList()
      } catch (err) {
        this.toast('删除失败！')
      }
    },
    // 题目编号跳转链接
    displayQuestionIDs (row) {
      console.log(row)
      this.dialogVisible = true
    },
    // 清除按钮的点击事件
    removeRandoms () {
      this.queryInfo.keyword = ''
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  .box-card {
    margin: 10px;
    // .inputlength {
    //   width: 100%;
    //   .inputSize {
    //     width: 239px;
    //   }
    // }
    .link {
      color: #0099ff;
    }
  }
}
</style>
